<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='../assets/mapbox-gl-dev.js'></script>
    <link href='../assets/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<style>
    #source-features {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }

    #rendered-features {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }

    #map canvas {
        cursor: crosshair;
    }
</style>
<div id='map'></div>
<pre id='source-features'></pre>
<pre id='rendered-features'></pre>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [
            101.9091796875,
            35.496456056584165
        ],
        zoom: 3,
        layers: []
    });
    map.on('load', function () {
        map.addLayer({
            "id": "my-water-shadow",
            "type": "fill",
            "source": "composite",
            "source-layer": "water",
            "paint": {
                "fill-color": "#45d4c6",
                "fill-translate": {
                    "base": 1.2,
                    "stops": [
                        [
                            7,
                            [
                                0,
                                0
                            ]
                        ],
                        [
                            16,
                            [
                                -1,
                                -1
                            ]
                        ]
                    ]
                },
                "fill-translate-anchor": "viewport",
                "fill-opacity": 1
            }
        });
        map.addLayer({
            "id": "my-admin-3-4-boundaries-bg",
            "type": "line",
            "source": "composite",
            "source-layer": "admin",
            "metadata": {
                "mapbox:group": "1444934295202.7542"
            },
            "filter": [
                "all",
                [
                    ">=",
                    "admin_level",
                    3
                ],
                [
                    "==",
                    "maritime",
                    0
                ]
            ],
            "layout": {
                "line-join": "bevel"
            },
            "paint": {
                "line-color": {
                    "base": 1,
                    "stops": [
                        [
                            1,
                            "#070eab"
                        ],
                        [
                            8,
                            "#ab0f76"
                        ],
                        [
                            16,
                            "#1cab22"
                        ]
                    ]
                },
                "line-width": {
                    "base": 1,
                    "stops": [
                        [
                            7,
                            3.75
                        ],
                        [
                            12,
                            5.5
                        ]
                    ]
                },
                "line-opacity": {
                    "base": 1,
                    "stops": [
                        [
                            7,
                            0
                        ],
                        [
                            8,
                            0.75
                        ]
                    ]
                },
                "line-dasharray": [
                    1,
                    0
                ],
                "line-translate": [
                    0,
                    0
                ],
                "line-blur": {
                    "base": 1,
                    "stops": [
                        [
                            3,
                            0
                        ],
                        [
                            8,
                            3
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            "id": "my-landcover_wood",
            "type": "fill",
            "source": "composite",
            "source-layer": "landcover",
            "metadata": {
                "mapbox:group": "1456970288113.8113"
            },
            "maxzoom": 14,
            "filter": [
                "==",
                "class",
                "wood"
            ],
            "paint": {
                "fill-color": "#fe194d",
                "fill-opacity": {
                    "base": 1.5,
                    "stops": [
                        [
                            2,
                            0.3
                        ],
                        [
                            7,
                            0
                        ]
                    ]
                },
                "fill-antialias": false
            }
        });
        map.addSource("states", {
            "type": "geojson",
            "data": "/mapbox-lg-demo/assets/ne_110m_admin_1_states_provinces.geojson"
        });
        map.addLayer({
            "id": "state-fills",
            "type": "fill",
            "source": "states",
            "layout": {},
            "paint": {
                "fill-color": "#627BC1",
                "fill-opacity": 0.5
            }
        });
        map.addLayer({
            "id": "state-border",
            "type": "line",
            "source": "states",
            "layout": {},
            "paint": {
                "line-color": "#627BC1",
                "line-opacity": 1
            }
        });
    });

    map.on('click', function (e) {
        var renderedFeatures = map.queryRenderedFeatures(e.point);
        var sourceFeatures = map.querySourceFeatures(e.point);
        document.getElementById('rendered-features').innerHTML = JSON.stringify(renderedFeatures, null, 2);
        document.getElementById('source-features').innerHTML = JSON.stringify(sourceFeatures, null, 2);
    });
</script>

</body>
</html>